
var backGroundImg = "chassisImgs/BDS2108Chassis.jpg";
var rj45Up = "chassisImgs/rj45_up.png";
var rj45Down = "chassisImgs/rj45_down.png";
var sfpUp = "chassisImgs/SFP_down.png";
var sfpDown = "chassisImgs/SFP.png";

var chassisWidth = 597;
var chassisHeight = 104;
var portCount = 8;

var imgSources = [backGroundImg,rj45Up,rj45Down,sfpUp,sfpDown];
var	portPositions = [
		{x:242,y:24,w:36,h:30,type:"RJ45UP"},
		{x:279,y:24,w:36,h:30,type:"RJ45UP"},
		{x:316,y:24,w:36,h:30,type:"RJ45UP"},
		{x:353,y:24,w:36,h:30,type:"RJ45UP"},
		{x:242,y:55,w:36,h:30,type:"RJ45DOWN"},
		{x:279,y:55,w:36,h:30,type:"RJ45DOWN"},
		{x:316,y:55,w:36,h:30,type:"RJ45DOWN"},
		{x:353,y:55,w:36,h:30,type:"RJ45DOWN"},
	];


function showPopUp2(){
	$("#testDiv").fadeIn(); 
}

function showPopUp(){
	//	<div id="popUpChassisHolder">
	//		<canvas id="popUpChassis" ></canvas>
	//	</div>
	var chassisDiv = $("#popUpChassisHolder"); 
	var chassisCanvas = $("#popUpChassis"); 
	chassisDiv.css({"width": chassisWidth,"height": chassisHeight});
	chassisCanvas.attr("width",chassisWidth);
	chassisCanvas.attr("height",chassisHeight);
	drawChassis("popUpChassis");

    var windowWidth = document.body.clientWidth;       
    var windowHeight = document.body.clientHeight;  

	var maskDiv = $("<div id='mask'></div>").addClass("mask");
	var maskw = windowWidth + document.body.scrollWidth;
	var maskh = windowHeight + document.body.scrollHeight;
	maskDiv.css({"width":maskw+"px","height":maskh+"px"});
	maskDiv.appendTo("body").fadeIn(200);

    
    var x = (windowWidth - chassisWidth)/2 
    chassisDiv.css({"left": x+"px","top":"100px","position":"absolute"});
    chassisDiv.fadeIn();
}


var loadedImages  = 0;
var numImages  = 0;
function loadImg(imgPaths,callback){
	for(var imgPath in imgPaths){    
    	numImages++; 
    }
    
    var canvas = document.getElementById("chassis");
    var ctx = canvas.getContext("2d");

//	canvas.width = chassisWidth;
//	canvas.height = chassisHeight;
	drawProgress(ctx , 0 , chassisWidth , chassisHeight);
	
	var imgPathIndex;	
	for(imgPathIndex in imgPaths){
		var tmpImg = new Image();
		tmpImg.src = imgPaths[imgPathIndex];
		tmpImg.onload = function(){
			//进度显示
			++loadedImages;
			drawProgress(ctx,loadedImages/numImages,chassisWidth,chassisHeight);

			if (loadedImages >= numImages) {    
                callback("chassis");
			}  
		}

	}
}

/**
 *ctx  画笔对象
 *progressNum	进度数
 *cvsw	画布宽度
 *cvsh   画布高度
 *
 */
function drawProgress(ctx , progressNum , cvsw , cvsh){

	var pgsw = cvsw - 30*2;
	var pgsh = 8;
	var pgslen = pgsw * progressNum;
	var psgInnerh = 6;

	var x = 30;
	var y = (cvsh - pgsh)/2;
	ctx.clearRect(0,0,cvsw,cvsh);

	ctx.fillStyle= "rgba(120,120,120,0.5)";
	ctx.fillRect(x,y-1,pgsw,pgsh);
	ctx.fillStyle= "rgba(120,120,120,1)";
	ctx.fillRect(x,y,pgsw,psgInnerh);

	var loadString = "Loading...";
	if(progressNum == 1){
		loadString = "Done."
	}
	ctx.font = "normal 15px 'Comic Sans MS'";
	ctx.fillText(loadString,x+2, y-15);


	if(pgslen > 0){
		ctx.fillStyle= "rgba(0,0,0,0.5)";
		ctx.fillRect(x,y-1,pgslen+1,pgsh);
		ctx.fillStyle= "rgba(0,0,0,1)";
		ctx.fillRect(x,y,pgslen,psgInnerh);
	}
}

/**
 * 等待
 * @param d
 */
function sleep(d){
  for(var t = Date.now();Date.now() - t <= d;);
}

function doChassisInit(){
	loadImg(imgSources,drawChassis);
}

function drawChassis(canvasId){
	var canvas = document.getElementById(canvasId)
	if (canvas == null)
		return false;
	//获取画笔
	var context = canvas.getContext("2d");
	//初始化图片
	context.clearRect(0,0,chassisWidth,chassisHeight);

	context.fillStyle = "red";
	context.fillRect(0,0,chassisWidth,chassisHeight);

	var backImg = new Image();
	backImg.src = backGroundImg;
	context.drawImage(backImg,0,0);

	for(var i=0;i<portCount;i++){
		var tmpImg = null;
		var tmpType = portPositions[i].type;
		
		if("RJ45UP" == tmpType){
			tmpImg = rj45Up;
		}else if("RJ45DOWN"== tmpType){
			tmpImg = rj45Down;
		}
		var port = new Image();
		port.src = tmpImg;
		context.drawImage(port,
		portPositions[i].x,
		portPositions[i].y,
		portPositions[i].w,
		portPositions[i].h);

	}
}






/*确保图片加载的情况下再去做相关动作*/
function preImage(url,callback){
	 var img = new Image(); //创建一个Image对象，实现图片的预下载  
     img.src = url;  
	if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数  
        callback.call(img);  
        return; // 直接返回，不用再处理onload事件  
     }  
  
     img.onload = function () { //图片下载完毕时异步调用callback函数。  
         callback.call(img);//将回调函数的this替换为Image对象  
     };  
}



//34*34      36*24     36*30
	function draw21(id) {
		var canvas = document.getElementById(id)
		if (canvas == null)
		 return false;
		var context = canvas.getContext("2d");
		//实践表明在不设施fillStyle下的默认fillStyle=black
		context.fillRect(0, 0, 100, 100);
		//实践表明在不设施strokeStyle下的默认strokeStyle=black
		context.strokeRect(120, 0, 100, 100);

		//设置纯色
		context.fillStyle = "red";
		context.strokeStyle = "blue";
		context.fillRect(0, 120, 100, 100);
		context.strokeRect(120, 120, 100, 100);

		//设置透明度实践证明透明度值>0,<1值越低，越透明，值>=1时为纯色，值<=0时为完全透明
		context.fillStyle = "rgba(255,0,0,0.2)";
		context.strokeStyle = "rgba(255,0,0,0.2)";
		context.fillRect(240,0 , 100, 100);
		context.strokeRect(240, 120, 100, 100);
	}

function draw26(id) {
		//同一个圆心画球型
		var canvas = document.getElementById(id);
		if (canvas == null)
		  return false;
		var context = canvas.getContext('2d');
		var g1 = context.createRadialGradient(200, 150, 0, 200, 150, 100);
		g1.addColorStop(0.1, 'rgb(255,0,0)');  
		g1.addColorStop(1, 'rgb(50,0,0)');
		context.fillStyle = g1;
		context.beginPath();
		context.arc(200, 150, 100, 0, Math.PI * 2, true);
		context.closePath();
		context.fill();


		//不同圆心看径向渐变模型
		// var canvas = document.getElementById(id);
		// if (canvas == null)
		// return false;
		// var context = canvas.getContext('2d');
		// var g1 = context.createRadialGradient(100, 150, 10, 300, 150, 50);
		// g1.addColorStop(0.1, 'rgb(255,0,0)');
		// g1.addColorStop(0.5, 'rgb(0,255,0)');
		// g1.addColorStop(1, 'rgb(0,0,255)');
		// context.fillStyle = g1;
		// context.fillRect(0, 0, 400, 300);
 }


function draw20(id) {
     var canvas = document.getElementById(id);
     if (canvas == null)
         return false;
     var context = canvas.getContext("2d");

     var interal = setInterval(function () {
         move(context);
     }, 30);
}
 
    var x = 0;//矩形开始坐标
    var y = 0;//矩形结束坐标
    var mx = 0;//0右1左
    var my = 0; //0下1上
    var ml = 1;//每次移动长度
    var w = 20;//矩形宽度
    var h = 20;//矩形高度
    var cw = 700;//canvas宽度
    var ch = 300; //canvas高度
 
 
	function move(context) {
	    context.clearRect(0, 0, cw, ch);
	    context.fillStyle = "#EEEEFF";
	    context.fillRect(0, 0, cw, ch);
	    context.fillStyle = "red";
	    context.fillRect(x, y, w, h);       
	    if (mx == 0) {
	        x = x + ml;
	        if (x >= cw-w) {
	            mx = 1;
	        }
	    }
	    else {
	        x = x - ml;
	        if (x <= 0) {
	            mx = 0;
	        }
	    }
	    if (my == 0) {
	        y = y + ml;
	        if (y >= ch-h) {
	            my = 1;
	        }
	    }
	    else {
	        y = y - ml;
	        if (y <= 0) {
	            my = 0;
	        }
	    }
	  
	}